<template>
  <div class="addExam">
    <!-- 表单区域 -->
    <el-form
      ref="form"
      :rules="formRules"
      label-width="300px"
      :model="formData"
    >
      <el-form-item prop="exam_name" label="考试名称">
        <el-input
          v-model="formData.exam_name"
          placeholder="请输入考试名称"
          style="width: 500px"
        ></el-input>
      </el-form-item>
      <el-form-item prop="exam_type" label="考试类型">
        <el-radio v-model="formData.exam_type" :label="1">阶段测试</el-radio>
        <el-radio v-model="formData.exam_type" :label="2">综合考试</el-radio>
      </el-form-item>
      <el-form-item prop="lock_screen" label="锁屏方式">
        <el-radio v-model="formData.lock_screen" :label="1">不锁屏</el-radio>
        <el-radio v-model="formData.lock_screen" :label="2">锁屏</el-radio>
      </el-form-item>
      <el-form-item prop="subject_id" label="归属学科">
        <el-select
          @change="changeSub(formData.subject_id)"
          @focus="getSubList"
          v-model="formData.subject_id"
          placeholder="归属学科"
        >
          <el-option
            v-for="item in subjectList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="directory_id" label="归属目录">
        <el-select
          @change="changeDir(formData.directory_id)"
          v-model="formData.directory_id"
          placeholder="归属目录"
        >
          <el-option
            v-for="item in directoryList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="考试时长">
        <el-input-number
          v-model="formData.exam_time"
          :min="1"
          label="描述文字"
        ></el-input-number>
      </el-form-item>
      <el-form-item prop="main_paper_id" label="试卷信息">
        <el-select
          v-model="formData.main_paper_id"
          placeholder="选择主考试卷"
          :disabled="formData.directory_id === ''"
        >
          <el-option
            v-for="item in paperList"
            :key="item.id"
            :label="item.paper_name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <el-row type="flex" justify="center">
      <el-button @click="createHandler" type="primary" size="small"
        >立即创建</el-button
      >
      <el-button size="small" @click="cancel">取消</el-button>
    </el-row>
  </div>
</template>

<script>
import {
  getPaperDetailApi,
  addExamApi,
  getSubjectListAPi,
} from "@/api/examInfo";
export default {
  name: "AddExam",
  data() {
    return {
      subjectList: [], //科目列表
      directoryList: [], //目录列表
      paperList: [], //试卷列表
      formData: {
        directory_id: "",
        exam_name: "",
        exam_time: 30,
        exam_type: 1,
        lock_screen: 1,
        main_paper_id: "",
        subject_id: "",
      },
      formRules: {
        exam_name: [
          { required: true, message: "请输入考试名", trigger: "blur" },
        ],
        exam_type: [{ required: true }],
        lock_screen: [{ required: true }],
        subject_id: [
          { required: true, message: "请选择学科", trigger: "blur" },
        ],
        directory_id: [
          { required: true, message: "请选择目录", trigger: "blur" },
        ],
        main_paper_id: [
          { required: true, message: "选择试卷", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    //学科选中触发事件
    changeSub(id) {
      // 清空目录
      console.log(id);
      // 找到对应学科对象
      let subObj = this.subjectList.find((item) => item.id === id);
      console.log(subObj);
      //   console.log(subObj);
      //   console.log(subObj["children"]);
      // 对学科对象的childred遍历(children的subject_id和父亲的id相等)
      let arr = [];
      subObj["children"].forEach((item) => {
        if (item.subject_id === id) arr.push(item);
      });
      console.log(arr);
      this.directoryList = arr;
    },
    //目录选中触发事件
    async changeDir(id) {
      console.log(id);
      //获取对应试卷
      let { list } = await getPaperDetailApi({
        subject_id: this.formData.subject_id,
        directory_id: id,
        show_state: 1,
      });
      this.paperList = list;
    },
    //创建考试处理函数
    async createHandler() {
      // 表单校验
      await this.$refs.form.validate();
      console.log(this.formData);
      await addExamApi(this.formData);
      // this.$message.success("创建成功");
      this.$message({
        message: "创建成功",
        type: "success",
        duration: 500,
        onClose: () => {
          this.$emit("updateToggle", true);
        },
      });
    },
    async getSubList() {
      let res = await getSubjectListAPi();
      this.subjectList = res;
    },
    cancel() {
      this.formData = {
        directory_id: "",
        exam_name: "",
        exam_time: 30,
        exam_type: 1,
        lock_screen: 1,
        main_paper_id: "",
        subject_id: "",
      };
    },
  },
};
</script>

<style scoped lang="scss">
.addExam {
  .el-button {
    color: #409eff;
    background: #ecf5ff;
    border-color: #b3d8ff;
  }
}
</style>
